import { defineComponent, toRefs, ref, computed, PropType } from "vue";
import { useState } from '@src/modules/trigger/hooks/useVC.ts'
import NodeSelect from '@src/modules/trigger/components/ProcessNodeChart/components/nodeSelect.tsx'
/* type */
import type { ProcessNodeListItem } from '@src/modules/trigger/model/interface/index.ts'
import { AllNodeType } from '@src/modules/trigger/model/enum/index.ts'
import '@src/modules/trigger/components/ProcessNodeChart/style/nodeContent.scss'

export default defineComponent({
    name: 'nodeTriggerContent',
    props: {
        nodeData: {
            type: Object as PropType<ProcessNodeListItem>,
            default: () =>({})
        },
        currentNodeType: {
            type: String as PropType<AllNodeType>,
            default: ''
        }
    },
    setup(props) {
        const { nodeData } = toRefs(props)
        const [isShow, setIsShow] = useState(true)


        const isShowSelect = computed(() => {
            return !!nodeData.value.options.appName
        })
        const nodeSelectHandler = () => {
            console.log('nodeSelectHandler')
        }

        return () => (
            <div class="node-content">
                {
                    (
                        !isShowSelect.value ? (
                            <div class="process-text">
                                请选择<span class="process__cicle">应用对象</span>和<span class="process__text">触发事件</span>
                            </div>
                        ) : (
                            <NodeSelect options={nodeData.value.options} nodeType={props.currentNodeType}/>
                        ) 
                    )  
                    
                }
                
            </div>
        )
    }
})